<template>
  <div class="rx-layout-navs" :style="{ width: `calc(100vw - ${collapsedWidth}px)` }">
    <t-tabs :value="pagePath" theme="card" @change="toPage">
      <t-tab-panel
        :value="item.path"
        v-for="(item, index) in useTabView.getTabViews"
        :key="item.path"
      >
        <template #label>
          <div
            class="flex gap-12 flex-items-center"
            @contextmenu.prevent="
              ($event) => {
                getComputed($event, $el);
                contextmenuItemView = item;
                contextmenuIndex = index;
              }
            "
          >
            <div>
              <svg-icon :name="item.meta && item.meta.icon"></svg-icon>
              {{ item.meta && item.meta.title }}
            </div>
            <div
              v-if="item.meta && !item.meta.affix"
              class="rd-50% p-1 transition-all-300 hover:bg-#c8c8c8"
              @click.stop="closeCurrentPage(item.path)"
            >
              <div class="i-tdesign:add rotate-z-45"></div>
            </div>
          </div>
        </template>
      </t-tab-panel>
    </t-tabs>

    <transition name="toTop" mode="out-in">
      <ul
        v-if="visible"
        :style="{ left: `${left + collapsedWidth}px`, top: top + 'px' }"
        class="contextmenu"
        @click.stop
      >
        <li @click="reloadPage"><span class="i-tdesign:refresh" />重新加载</li>
        <li
          @click="closeCurrentPage(contextmenuItemView.path)"
          :class="
            !(contextmenuItemView.meta && !contextmenuItemView.meta.affix)
              ? 'text-#000:40 cursor-not-allowed! hover:bg-#fff! pointer-events-none'
              : ''
          "
        >
          <span class="i-tdesign:add rotate-z-45" />关闭标签页
        </li>
        <t-divider class="m-y-4!" />
        <li
          @click="closeLeftPage"
          :class="
            !(contextmenuIndex > useTabView.getFixedViews.length)
              ? 'text-#000:40 cursor-not-allowed! hover:bg-#fff! pointer-events-none'
              : ''
          "
        >
          <span class="i-tdesign:arrow-left" />关闭左侧标签页
        </li>
        <li
          @click="closeRightPage"
          :class="
            !(contextmenuIndex !== useTabView.getTabViews.length - 1)
              ? 'text-#000:40 cursor-not-allowed! hover:bg-#fff! pointer-events-none'
              : ''
          "
        >
          <span class="i-tdesign:arrow-right" />关闭右侧标签页
        </li>
        <t-divider class="m-y-4!" />
        <li
          @click="closeOtherPage"
          :class="
            contextmenuIndex !== 0 && useTabView.getTabViews.length === 2
              ? 'text-#000:40 cursor-not-allowed! hover:bg-#fff! pointer-events-none'
              : ''
          "
        >
          <span class="i-tdesign:arrow-left-right-circle" />关闭其它标签页
        </li>
        <li
          @click="closeAllPage"
          :class="
            useTabView.getTabViews.length - 1 === 0
              ? 'text-#000:40 cursor-not-allowed! hover:bg-#fff! pointer-events-none'
              : 'pointer'
          "
        >
          <span class="i-tdesign:add-circle rotate-z-45" />关闭全部标签页
        </li>
      </ul>
    </transition>
  </div>
</template>
<script setup lang="ts">
import { useMouseInElement } from '@/hooks/useMouseInElement.ts';
import { TabValue } from 'tdesign-vue-next';
import {
  useTabNavControl,
  useTabView,
  contextmenuIndex,
  contextmenuItemView,
} from '@/hooks/useTabNavControl.ts';
/**
 * =======================页面tabs标签相关逻辑 =====================
 */
const route = useRoute();
const router = useRouter();
const pagePath = ref();
const {
  reloadPage: _reloadPage,
  closeOtherPage: _closeOtherPage,
  closeCurrentPage: _closeCurrentPage,
  closeLeftPage: _closeLeftPage,
  closeAllPage: _closeAllPage,
  closeRightPage: _closeRightPage,
} = useTabNavControl();

const reloadPage = () => {
  _reloadPage();
  closeMenu();
};

const closeCurrentPage = (path: string) => {
  _closeCurrentPage(path);
  closeMenu();
};

const closeLeftPage = () => {
  _closeLeftPage();
  closeMenu();
};

const closeOtherPage = () => {
  _closeOtherPage();
  closeMenu();
};

const closeRightPage = () => {
  _closeRightPage();
  closeMenu();
};

const closeAllPage = () => {
  _closeAllPage();
  closeMenu();
};

const toPage = (e: TabValue) => {
  router.push(e as string);
};

watchEffect(() => {
  pagePath.value = route.path;
  useTabView.addTabView(router.getRoutes().find((routeT) => routeT.path === route.path));
});

/**
 *  ======================================================
 */

/**
 * ==================导航栏鼠标右键菜单====================
 */
const { left, top, getComputed } = useMouseInElement();
const visible = ref(false);

watch([() => left.value, () => top.value], () => {
  visible.value = true;
});
watch([() => visible.value], () => {
  if (pagePath) {
    document.body.addEventListener('click', closeMenu);
  } else {
    document.body.removeEventListener('click', closeMenu);
  }
});
const closeMenu = () => {
  visible.value = false;
};
/**
 * ====================================================
 */

/**
 * ==================折叠左侧菜单逻辑====================
 */
interface IProps {
  collapsed?: boolean;
}
const props = withDefaults(defineProps<IProps>(), {
  collapsed: true,
});

const collapsedWidth = ref(232);

watch(
  [() => props.collapsed],
  () => {
    collapsedWidth.value = props.collapsed ? 64 : 232;
  },
  {
    immediate: true,
  },
);
/**
 * ====================================================
 */
</script>

<style lang="scss" scoped>
.contextmenu {
  @apply absolute
    w-max
    bg-#fff
    list-none
    b-rd-8
    p4
    z-99999
    translate-x--50%
    scale-100
    transition-all-300;
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  li {
    @apply flex
    flex-items-center
    gap-4
    cursor-pointer
    p-y-6
    p-x-10
    b-rd-6
    hover:bg-#9B9B9B22
    transition-all-300;
  }
}
</style>
